<template>
  <div class="mobile-password-detail common-mobile-view">
    <el-form ref="formRef" :model="passwordStore.currentPassword"
             :rules="rules" label-width="70px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="passwordStore.currentPassword.title" autocomplete="off"
                  placeholder="请输入标题" clearable
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <el-form-item label="账号" prop="username">
        <el-input v-model="passwordStore.currentPassword.username" autocomplete="off"
                  placeholder="请输入账号" clearable
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="passwordStore.currentPassword.password" autocomplete="off"
                  placeholder="请输入密码" type="password" clearable
                  show-password show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <el-form-item label="网站">
        <el-input v-model="passwordStore.currentPassword.website" autocomplete="off"
                  placeholder="请输入网站" clearable
                  type="textarea" :rows="3"
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <el-form-item label="所属人" prop="owner">
        <el-select v-model="passwordStore.currentPassword.owner"
                   placeholder="请选择所属人" clearable>
          <el-option
              v-for="(item, index) in ['哥哥', '宝宝']"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="passwordStore.currentPassword.category"
                   placeholder="请选择物品分类" clearable
                   :allow-create="true" :filterable="true">
          <el-option
              v-for="(item, index) in passwordStore.categoryList"
              :key="index" :label="item" :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="passwordStore.currentPassword.remark" autocomplete="off"
                  placeholder="请输入备注" clearable
                  type="textarea" :rows="3"
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePasswordStore } from '@/store/password.ts'
import { useAppStore } from '@/store/app.ts'
import { FormRules } from 'element-plus'
import { passwordRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'

const formRef = ref()
const rules = reactive<FormRules>(passwordRules)
const passwordStore = usePasswordStore()
const appStore = useAppStore()

onMounted(async () => {
  appStore.isShowMobileBack = true
})

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await passwordStore.handlePasswordApi(passwordStore.currentPassword)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}
</script>

<style scoped lang="scss">
.mobile-password-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
